<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/documentMyReady.js"></script>
    <title>Document</title>
    <style>
        .wrap ul{
            list-style-type: none;  
            display:inline-block;
        }
        .wrap ul li{
            background-color: aquamarine;
            border: 1px solid #ccc;
            line-height: 1.5;
        }
        .wrap ul li:hover{
            background-color: cadetblue;
            cursor: default;
        }
        .click-menu{
            display: none;
            width: 300px;
            position: fixed;
            background-color: white;
            border: 1px solid #ccc;
        }
        .click-menu ul{
            list-style-type: none;
            margin: 2px 0;
            padding: 0;
        }
        .click-menu ul li{
            line-height: 1;
            border-bottom: 0;
            padding: 5px 20px;
        }
        .click-menu ul li:hover{
            background-color: #eee;
            cursor: default;
        }
    </style>
    <script>
        document.myReady(function(){
            //定义dom
            let liDom = document.getElementsByClassName('wrap')[0].getElementsByTagName('li');
            let clickMenu = document.getElementsByClassName('click-menu')[0];
            let cilckMenuLi = clickMenu.getElementsByTagName('li');
            let liDomLength = liDom.length;
            let cilckMenuLiLength = cilckMenuLi.length;
            //阻止浏览器默认右键
            document.oncontextmenu = function(e){
                if(e.preventDefault){
                    e.preventDefault();
                    return;
                }else{
                    e.returnValue = false;
                    return;
                }
                return false;
            }
            //浏览器默认左键隐藏弹出菜单
            document.onclick = function(){
                clickMenu.style.display = 'none';
            }
            //鼠标右键自定义
            for(let i = 0; i < liDomLength; i ++){
                liDom[i].onmousedown = function(e){
                    if(e.button == 2){
                        clickMenu.style.left = e.clientX + 'px';
                        clickMenu.style.top = e.clientY +'px';
                        clickMenu.style.display = 'block'; 
                    }
                }
            }
            //鼠标选择菜单的动作
            for(let i = 0; i < cilckMenuLiLength; i ++){
                cilckMenuLi[i].addEventListener('mousedown',function(){
                    console.log(this.innerHTML);
                },false);
            }
            
        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>hello1</li>
            <li>hello2</li>
            <li>hello3</li>
            <li>hello4</li>
            <li>hello5</li>
            <li>hello6</li>
            <li>hello7</li>
            <li>hello8</li>
        </ul>
    </div>
    <div class="click-menu">
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
            <li>menu5</li>
        </ul>
    </div>
    <div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
</body>
</html>